<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue.js</title>
  </head>
  <body>
    <div id="app">
      <div class="container">
        <p>作者：{{ author }}</p>
        <p>标题：{{ label }}</p>
        <p>内容：{{ value }}</p>
        <p>关键词：{{ key }}</p>
        <button @click="btn">按钮</button>
        <input type="text" v-model="key" />
      </div>
    </div>
  </body>
  <script type="text/javascript" src="./vue.js"></script>
  <script type="text/javascript">
    new Vue({
      el: "#app",
      data: {
        author: "恋清梦",
        label: "手写Vue底层逻辑",
        value: "Vue.js",
        key: "Vue",
      },
      beforeCreate() {
        console.log("beforeCreate");
      },
      created() {
        console.log("created");
      },
      beforeMount() {
        console.log("beforeMount");
      },
      mounted() {
        console.log("mounted");
      },
      methods: {
        btn() {
          this.key = "Vue2.0";
        },
      },
    });
  </script>
</html>
